/*
 * @Description: 根据情感聚类的散点图
 * @Author: zy
 * @Date: 2020-12-22 20:20:05
 * @LastEditors: Wuyi
 * @LastEditTime: 2021-01-24 10:26:39
 */
import * as d3 from 'd3'
export class Cluster {
  data = []
  chart = {}
  color = d3.scaleOrdinal()
  constructor (divId) {
    this.divId = divId
    this.initChart()
  }

  initChart () {
    this.chart.padding = {
      left: 20,
      right: 50,
      top: 20,
      bottom: 20
    }
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight -
      this.chart.padding.top -
      this.chart.padding.bottom
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth -
      this.chart.padding.left -
      this.chart.padding.right

    this.chart.svg = d3
      .select('#' + this.divId)
      .append('svg')
      .attr('width', this.chart.divWidth +
        this.chart.padding.left +
        this.chart.padding.right
      )
      .attr('height', this.chart.divHeight +
        this.chart.padding.top +
        this.chart.padding.bottom
      )
      .attr('class', 'svg_chart')
  }

  initAxis () {
    this.chart.xScale = d3.scaleLinear()
      .domain(d3.extent(this.data, function (d) {
        return +d.x
      }))
      .range([this.chart.padding.left, this.chart.divWidth])

    this.chart.yScale = d3.scaleLinear()
      .domain(d3.extent(this.data, function (d) {
        return +d.y
      }))
      .range([this.chart.divHeight, this.chart.padding.top])

    this.color.domain(this.category).range(d3.schemeCategory10)

    this.chart.xAxis = d3
      .axisBottom()
      .scale(this.chart.xScale)
      .ticks(this.data.length)
    //   .tickFormat((d) => 2015 + parseInt(d))
    this.chart.yAxis = d3.axisLeft().scale(this.chart.yScale)

    // if (this.chart.svg.select('.xAxis')._groups[0][0] !== undefined) {
    //   this.chart.svg.select('.xAxis').call(this.chart.xAxis)
    // } else {
    //   this.chart.svg
    //     .append('g')
    //     .attr('class', 'xAxis')
    //     .attr('transform', 'translate(0,' + this.chart.divHeight + ')')
    //     .call(this.chart.xAxis)
    // }

    // if (this.chart.svg.select('.yAxis')._groups[0][0] !== undefined) {
    //   this.chart.svg.select('.yAxis').call(this.chart.yAxis)
    // } else {
    //   this.chart.svg
    //     .append('g')
    //     .attr('class', 'yAxis')
    //     .attr('transform', 'translate(' + this.chart.padding.left + ')')
    //     .call(this.chart.yAxis)
    // }
  }

  render () {
    this.initAxis()
    let scatter = this.chart.svg.selectAll('.scatter')
      .data(this.data)

    scatter.select('circle')
      .transition()
      .duration(750)
      .attr('cx', d => this.chart.xScale(d.x))
      .attr('cy', d => this.chart.yScale(d.y))

    let scatterEnter = scatter.enter()
      .append('g')
      .attr('class', 'scatter')

    scatterEnter.append('circle')
      .attr('cx', d => this.chart.xScale(d.x))
      .attr('cy', d => this.chart.yScale(d.y))
      .attr('r', 0)
      .style('fill', d => this.color(d.category))
      .style('stroke', 'black')
      .transition()
      .duration(750)
      .attr('r', 3)

    let scatterExit = scatter.exit()
      .transition()
      .duration(750)
      .remove()

    scatterExit.select('circle')
      .attr('cr', 0)
  }
}
